<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Tables</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="javascript/helpers.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="messages"></div>
        <h1>Tables</h1>
        <h2>Semantic table</h2>
        <table cellspacing="0" cellpadding="5" rules="groups" frame="box" border="1" id="axis_example" summary="Hugh Laurie made more money than Gregory House in both March and April of 2008.">
            <caption>Income tax information for Gregory House and Hugh Laurie</caption>
            <colgroup width="25%" align="left"></colgroup>
            <colgroup width="25%" span="3" align="right"></colgroup>
            <thead id="tax_headers">
                <tr style="border-bottom: 1px solid black;" class="dark" id="thead_row_1">
                    <th></th>
                    <th id="before_tax" axis="cash" abbr="Before tax">Before income tax</th>
                    <th id="tax" axis="cash" abbr="Tax">Income tax</th>
                    <th id="after_tax" axis="cash" abbr="After tax">After income tax</th>
                </tr>
            </thead>
            <tfoot id="tax_totals">
                <tr class="dark" id="tfoot_row_1">
                    <th axis="sum">Sum</th>
                    <td headers="before_tax">24 349</td>
                    <td headers="tax">5 577</td>
                    <td headers="after_tax">18 722</td>
                </tr>
            </tfoot>
            <tbody id="first">
                <tr id="march">
                    <th id="d1" axis="date" scope="rowgroup">March 2008</th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr id="gregory">
                    <td id="p1" abbr="Dr. House">Gregory House</td>
                    <td headers="before_tax p1 d1">5 934</td>
                    <td headers="tax p1 d1">1 347</td>
                    <td headers="after_tax p1 d1">4 587</td>
                </tr>
                <tr id="hugh">
                    <td id="p2" abbr="Laurie">Hugh Laurie</td>
                    <td headers="before_tax p2 d1">6 300</td>
                    <td headers="tax p2 d1">1 479</td>
                    <td headers="after_tax p2 d1">4 821</td>
                </tr>
            </tbody>
            <tbody name="second" id="second">
                <tr>
                    <th id="d2" axis="date" scope="rowgroup">April 2008</th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                     <td id="p3" abbr="Dr. House">Gregory House</td>
                     <td headers="before_tax p3 d2">5 863</td>
                     <td headers="tax p3 d2">1 331</td>
                     <td headers="after_tax p3 d2">4 532</td>
                </tr>
                <tr>
                    <td id="p4" abbr="Laurie">Hugh Laurie</td>
                    <td headers="before_tax p4 d2">6 252</td>
                    <td headers="tax p4 d2">1 420</td>
                    <td headers="after_tax p4 d2">4 <span id="cell-child">832</span></td>
                </tr>
            </tbody>
        </table>
        <h2>Table inside a table</h2>
        <table border="1" id="outer">
            <tr id="outer_first">
                <td>
                    Table 1, Row 1, Cell 1
                </td>
                <td>
                    Table 1, Row 1, Cell 2
                </td>
            </tr>
            <tr id="outer_second">
                <td id="t1_r2_c1">
                    Table 1, Row 2, Cell 1
                </td>
                <td id="t1_r2_c2">
                    Table 1, Row 2, Cell 2
                    <table border="1" id="inner" onclick="WatirSpec.addMessage('table')">
                        <tr id="inner_first" onclick="WatirSpec.addMessage('tr')">
                            <td id="t2_r1_c1" onclick="WatirSpec.addMessage('td')">
                                Table 2, Row 1, Cell 1
                            </td>
                            <td>
                                Table 2, Row 1, Cell 2
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr id="outer_last">
                <td>
                    Table 1, Row 3, Cell 1
                </td>
                <td>
                    Table 1, Row 3, Cell 2
                </td>
            </tr>
        </table>
        <h2>Colspan</h2>
        <table border="1" id="colspan">
            <tr>
                <td colspan="2" id="colspan_2">Colspan 2</td>
            </tr>
            <tr>
                <td id="no_colspan">No colspan attribute</td>
                <td>No colspan attribute</td>
            </tr>
        </table>
    </body>
</html>